<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册 - 志愿服务管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <style>
        .register-container {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
            padding: var(--spacing-md);
        }

        .register-card {
            background: var(--background-white);
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-lg);
            width: 100%;
            max-width: 500px;
            padding: var(--spacing-xl);
        }

        .register-header {
            text-align: center;
            margin-bottom: var(--spacing-xl);
        }

        .register-header h1 {
            color: var(--primary-color);
            font-size: 2em;
            margin-bottom: var(--spacing-md);
        }

        .register-header p {
            color: var(--text-secondary);
        }

        .register-form .form-group {
            margin-bottom: var(--spacing-lg);
        }

        .register-form .input-group-text {
            background-color: transparent;
            border-right: none;
            min-width: 45px;
            justify-content: center;
        }

        .register-form .form-control {
            border-left: none;
            padding: var(--spacing-md);
        }

        .register-form .input-group:focus-within {
            box-shadow: 0 0 0 2px var(--primary-light);
            border-radius: var(--border-radius-sm);
        }

        .form-label {
            color: var(--text-secondary);
            margin-bottom: var(--spacing-sm);
            font-weight: 500;
        }

        .btn-register {
            width: 100%;
            padding: var(--spacing-md);
            font-size: 1.1em;
            margin-top: var(--spacing-lg);
        }

        .register-footer {
            text-align: center;
            margin-top: var(--spacing-xl);
        }

        .register-footer a {
            color: var(--primary-color);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .register-footer a:hover {
            color: var(--primary-dark);
        }

        .password-requirements {
            font-size: 0.9em;
            color: var(--text-secondary);
            margin-top: var(--spacing-sm);
        }

        .password-requirements ul {
            list-style: none;
            padding-left: 0;
            margin-top: var(--spacing-xs);
        }

        .password-requirements li {
            margin-bottom: var(--spacing-xs);
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }

        .password-requirements i {
            color: var(--text-secondary);
        }

        .password-requirements li.valid i {
            color: var(--success-color);
        }
    </style>
</head>
<body>
    <div class="register-container">
        <div class="register-card fade-in">
            <div class="register-header">
                <h1>用户注册</h1>
                <p>创建您的志愿者账号</p>
            </div>

            <form class="register-form" th:action="@{/register}" method="post" id="registerForm">
                <div class="form-group">
                    <label class="form-label">用户名</label>
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="fas fa-user"></i>
                        </span>
                        <input type="text" class="form-control" name="username" required
                               placeholder="请输入用户名" minlength="3" maxlength="20">
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">密码</label>
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="fas fa-lock"></i>
                        </span>
                        <input type="password" class="form-control" name="password" required
                               placeholder="请输入密码" id="password">
                    </div>
                    <div class="password-requirements">
                        <ul>
                            <li><i class="fas fa-check-circle"></i> 至少8个字符</li>
                            <li><i class="fas fa-check-circle"></i> 包含大小写字母</li>
                            <li><i class="fas fa-check-circle"></i> 包含数字</li>
                            <li><i class="fas fa-check-circle"></i> 包含特殊字符</li>
                        </ul>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">确认密码</label>
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="fas fa-lock"></i>
                        </span>
                        <input type="password" class="form-control" name="confirmPassword" required
                               placeholder="请再次输入密码" id="confirmPassword">
                    </div>
                </div>


                <div class="form-group">
                    <label class="form-label">手机号码</label>
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="fas fa-phone"></i>
                        </span>
                        <input type="tel" class="form-control" name="phone" required
                               placeholder="请输入手机号码" pattern="[0-9]{11}">
                    </div>
                </div>

                <button type="submit" class="btn btn-primary btn-register">
                    <i class="fas fa-user-plus me-2"></i>注册
                </button>

                <div class="register-footer">
                    <p>已有账号？ <a th:href="@{/login}">立即登录</a></p>
                </div>
            </form>
        </div>
    </div>

    <script>
        const password = document.getElementById('password');
        const confirmPassword = document.getElementById('confirmPassword');
        const form = document.getElementById('registerForm');
        const requirements = document.querySelectorAll('.password-requirements li');

        // Password validation
        password.addEventListener('input', function() {
            const value = this.value;
            
            // Length check
            if(value.length >= 8) {
                requirements[0].classList.add('valid');
            } else {
                requirements[0].classList.remove('valid');
            }
            
            // Uppercase and lowercase
            if(/(?=.*[a-z])(?=.*[A-Z])/.test(value)) {
                requirements[1].classList.add('valid');
            } else {
                requirements[1].classList.remove('valid');
            }
            
            // Numbers
            if(/\d/.test(value)) {
                requirements[2].classList.add('valid');
            } else {
                requirements[2].classList.remove('valid');
            }
            
            // Special characters
            if(/[!@#$%^&*(),.?":{}|<>]/.test(value)) {
                requirements[3].classList.add('valid');
            } else {
                requirements[3].classList.remove('valid');
            }
        });

        // Form validation
        form.addEventListener('submit', function(e) {
            if(password.value !== confirmPassword.value) {
                e.preventDefault();
                alert('两次输入的密码不一致！');
                return false;
            }
            
            if(password.value.length < 8) {
                e.preventDefault();
                alert('密码长度不能少于8个字符！');
                return false;
            }
            
            if(!/(?=.*[a-z])(?=.*[A-Z])/.test(password.value)) {
                e.preventDefault();
                alert('密码必须包含大小写字母！');
                return false;
            }
            
            if(!/\d/.test(password.value)) {
                e.preventDefault();
                alert('密码必须包含数字！');
                return false;
            }
            
            if(!/[!@#$%^&*(),.?":{}|<>]/.test(password.value)) {
                e.preventDefault();
                alert('密码必须包含特殊字符！');
                return false;
            }
        });
    </script>
</body>
</html>